<template>
  <div>
    <div class="top">
      <span class="top1" @click="fun">&nbsp;<&nbsp; </span>
          <span class="top2">信息验证</span>
          <p class="top3">验证门店账户信息</p>
          <p class="top4">验证信息即可获取线下门店订单</p>
    </div>
    <div class="bottom">
      <van-icon name="phone-circle" style="padding: 23px;font-size: 28px;" />183&nbsp;&nbsp;9195&nbsp;&nbsp;9070
      <van-field v-model="fieldValue" is-link readonly label="证件" placeholder="请选择证件类型" @click="show = true"
        style="width: 330px; margin: 10px 20px; border-radius: 10px;" />
      <van-popup v-model="show" round position="bottom">
        <van-cascader v-model="cascaderValue" title="请选择证件类型" :options="options" @close="show = false"
          @finish="onFinish" />
      </van-popup>
      <van-field label="名字" placeholder="请输入证件号" style="width: 330px; margin: 15px 20px; border-radius: 10px;" />
      <van-field label="密码" placeholder="请输入验证码" style="width: 330px; margin: 10px 20px; border-radius: 10px;" />
      <van-field placeholder="立即绑定"
        style="width: 330px; margin: 10px 20px; border-radius: 10px; background-color: red;padding-left:150px ;margin-top:40px;" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      fieldValue: '',
      cascaderValue: '',
      // 选项列表，children 代表子选项，支持多级嵌套
      options: [
        {
          text: '护照',
          value: '330000',
        },
        {
          text: '身份证',
          value: '320000',
        },
        {
          text: '港澳通行证',
          value: '320000',
        },
        {
          text: '台胞证',
          value: '320000',
        },
      ],
    };
  },
  methods: {
    // 全部选项选择完毕后，会触发 finish 事件
    onFinish({ selectedOptions }) {
      this.show = false;
      this.fieldValue = selectedOptions.map((option) => option.text).join('/');
    },
    fun() {
      this.$router.push('/mycom').catch(err => { })
    }
  },
};
</script>

<style scoped>
.top {
  width: 100%;
  height: 200px;
  background-image: linear-gradient(to right,
      hsla(351, 56%, 80%, 0.354),
      white);
}

.top .top1 {
  padding: 10px;
  font-size: 20px;
}

.top .top2 {
  padding: 10px 110px;
  font-size: 20px;
}

.top .top3 {
  font-size: 24px;
  padding: 50px 0 10px 20px;
}

.top .top4 {
  font-size: 10px;
  color: gray;
  padding: 0 0 0 20px;
}
</style>